<template>
	<view  style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;">

		<view class="head">
			<view class="" :style="{'height': Number(statusBarHeight*2)+'rpx'}"></view>
			<view class="head__box" :style="{'width':windowWidth+'px','height':  naviBarHeight+'px'}">
				<view @click="isBack" class="head__box__img">
					<image src="/static/icon/fanhui.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
				</view>
				<view style="font-size: 32rpx;color: #000000;">书架</view>
			</view>
		</view>
		<view class="" :style="{'height': Number((statusBarHeight + naviBarHeight)*2)+'rpx'}"></view>

		<view class="search">
			<view class="search__box">
				<input class="search__box__input" confirm-type="text" type="text" @confirm="searchText" v-model="title" />
				<view class="search__box__content" v-if="title == ''">
					<image class="search__box__content__img" src="/static/icon/search.png" mode=""></image>
					<view class="search__box__content__text">
						<text>请输入关键词</text>
					</view>
				</view>
				<view class="search__box__icon" v-if="title != ''" @click="reset">
					<image class="search__box__icon__img" src="/static/icon/password_icon_del.png" mode=""></image>
				</view>
			</view>
		</view>


		<view style="display: flex;">
			<scroll-view class="scroll-list" scroll-y scroll-with-animation style="height: 100%;">
				<view class="left-tab" :class="index==tab_cur?'text-blue cur':'text-grey'" v-for="(item,index) in tab_list" :key="index"
				 @tap="TabSelect(index,item.id)">
					{{item.typeName}}
				</view>
			</scroll-view>


			<scroll-view v-if="is_occupied" @scroll="scroll" :refresher-enabled="enabled" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered"  @refresherrestore="refresherrestore" @scrolltolower="initMore"   class="scroll-content" scroll-y scroll-with-animation
			 :style="'height:'+ Number(windowHeight*2- 173 - Number((statusBarHeight + naviBarHeight)*2))+'rpx'">
				<view class="" style="width: 100%;display: flex;align-items: stretch;justify-content: space-between;flex-wrap: wrap;box-sizing: border-box;">
					<view v-for="(item,index) in bookrack_list" @click="navigateToPage(index)" :key="index  +'info'" class="" style="width: 48%;display: flex;flex-direction: column;justify-content: center;margin-bottom: 20rpx;"> 
						<image :src="item.bookImg" style="width: 100%;height: 300rpx;" mode="aspectFill"></image>
						<view class="" style="padding: 5rpx 0rpx 0rpx 0rpx;display: flex;flex-direction: column;justify-content: flex-start;height: 130rpx;">
							<view class="" style="font-size: 24rpx;">
								{{item.bookName}}
							</view>
							<view class="text-twoline" style="font-size: 20rpx;">
								{{item.bookAuthor}}
							</view>
						</view>
					</view>
				</view>



			</scroll-view>


			<view v-else  :style="'height:'+ Number(windowHeight*2- 100 - Number((statusBarHeight + naviBarHeight)*2))+'rpx'"
			 style="width: 100%;display: flex;align-items: center;justify-content: center;flex: 1;">
				<image src="../../static/icon/kong_icon_bg.png" style="width: 422rpx;height: 298rpx;" mode=""></image>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		Debounce
	} from '@/common/utils.js' // 防抖函数（减少函数的调用）

	export default {
		data() {
			return {
				tab_cur: 0,
				tab_list: [],
				type_id: '', //分类id
				pageNo: 1,
				pageSize: 10,
				is_page: true,
				title: '',
				bookrack_list: [],
				is_occupied: false,
				
				enabled:true,//是否开启下拉
				triggered:false,
			};
		},
		props: {
			windowWidth: { //系统界面宽度
				type: Number,
				default () {
					return 0;
				}
			},
			windowHeight: { //系统界面高度
				type: Number,
				default () {
					return 0;
				}
			},
			statusBarHeight: { //状态栏高度
				type: Number,
				default () {
					return 0;
				}
			},
			naviBarHeight: { //导航栏高度
				type: Number,
				default () {
					return 0;
				}
			}
		},
		mounted() {
			this.$bookLending.fAppBooksCateList().then((res) => {
				this.tab_list = res.data.result.records
				if (this.tab_list) {
					this.type_id = this.tab_list[0].id
					this.getBookList()
				}
			})
			let self = this
			uni.$on('updateBorrowList_event',function() {
				self.bookrack_list = []
				self.getBookList()
			})
		},
		methods: {
			isBack() {
				this.$emit('isBack');
			},

			getBookList() {
				this.$bookLending.fAppBooksBookList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					bookName: this.title,
					typeId: this.type_id
				}).then((res) => {
				
					var data = res.data.result.records
					if (data.length > 0) {
						this.is_page = true
					} else {
						this.is_page = false
					}
					this.bookrack_list = this.bookrack_list.concat(data);
					if (this.bookrack_list.length > 0) {
						this.is_occupied = true
					} else {
						this.is_occupied = false
					}
					this.$forceUpdate()
				})
			},
			TabSelect(index, id) {
				this.tab_cur = index
				this.type_id = id
				this.pageNo = 1
				this.bookrack_list = []
				
			
				this.getBookList()
			},

			//跳转书籍详情
			navigateToPage(index) {
				uni.navigateTo({
					url: '/pages/library/bookDetails?data=' + encodeURIComponent(JSON
						.stringify(this.bookrack_list[index]))
				})
			},
			searchText: Debounce(
				function() {
					this.pageNo = 1
					this.bookrack_list = []
					this.getBookList()
				}),
			reset() {
				this.title = ''
				this.pageNo = 1
				this.bookrack_list = []
				this.getBookList()

			},
			initMore() {

				if (this.is_page) {
					this.pageNo++
					this.getBookList()
				}
			},
			
			scroll(e) {
				console.log(e)
				if (e.target.scrollTop <= 45) {
					this.enabled = true
				} else {
					this.enabled = false
				}
			},
			refresherrefresh(){
				this.pageNo = 1
				this.triggered = true;
				
				this.$bookLending.fAppBooksBookList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					bookName: this.title,
					typeId: this.type_id
				}).then((res) => {
					this.triggered = false
					this.bookrack_list = []
					var data = res.data.result.records
					if (data.length > 0) {
						this.is_page = true
					} else {
						this.is_page = false
					}
					this.bookrack_list = this.bookrack_list.concat(data);
					if (this.bookrack_list.length > 0) {
						this.is_occupied = true
					} else {
						this.is_occupied = false
					}
					this.$forceUpdate()
				})
			},
			refresherrestore() {
				// uni.showToast({
				// 	title: '刷新成功',
				// 	duration: 2000,
				// 	icon: 'none'
				// });
			},

		}
	}
</script>

<style lang="scss">
	.head {
		position: fixed;top: 0;left: 0;right: 0;background-color: #FFFFFF;border-bottom: 1px solid #f8f8f8;
		&__box {
			display: flex;align-items: center;justify-content: center;position: relative;
			&__img {
				position:absolute;left: 43rpx;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #000000;
			}
		}
	}
	.search {
		width: 100%;
		height: 94rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

		&__box {
			width: 700rpx;
			height: 80rpx;
			background-color: #F6F6F6;
			border-radius: 30rpx;
			display: flex;
			align-items: center;

			&__input {
				width: 600rpx;
				height: 80rpx;
				position: relative;
				left: 30rpx;
			}

			&__content {
				height: 80rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 74rpx;

				&__img {
					width: 24rpx;
					height: 24rpx;
				}

				&__text {
					height: 80rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: rgba(153, 153, 153, 1);
					margin-left: 13rpx;
				}
			}

			&__icon {
				width: 30rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-left: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&__img {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
				}
			}
		}
	}

	.text-oneline {
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text-twoline {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.scroll-list {
		width: 200rpx;
		height: calc(100vh - 150rpx);
		background-color: #f7f7f7;
	}

	.left-tab {
		width: 100%;
		height: 100rpx;
		font-size: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-blue {
		background-color: #FFFFFF;
		border-left: 9rpx solid #007AFF;
	}

	.text-grey {
		border-left: 9rpx solid #efefef;
	}

	.scroll-content {
		flex: 1;
		background-color: #FFFFFF;
		padding: 33rpx 33rpx 0rpx 33rpx;
		;
	}
</style>
